<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>景区基本信息</span>
          </div>
          <div>
            <!--            <div class="text-center">-->
            <!--              <userAvatar :user="user"/>-->
            <!--            </div>-->
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                景区ID
                <div class="pull-right">{{ scenicBasicInfo.scenicId }}</div>
              </li>
              <li class="list-group-item">
                景区名称
                <div class="pull-right">{{ scenicBasicInfo.scenicName }}</div>
              </li>
              <li class="list-group-item">
                运营状态
                <!--                <el-tooltip content="点击开启或关闭景区" placement="right-start">-->
                <el-tooltip :content="operationStatusContent" placement="top">
                  <el-switch v-model="scenicBasicInfo.operationStatus" active-value="0" inactive-value="1"
                             style="float: right"
                             @change="handleOperationStatusChange(scenicBasicInfo.scenicId,scenicBasicInfo.operationStatus)"></el-switch>
                </el-tooltip>
                <span ref="operationStatusText"
                      style="float: right;font-size: 8px;color:red;margin-right:5px">已停止运营</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本设置</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="景区基本资料" name="scenicInfo">
              <el-form ref="basicInfoFrom" :model="basicInfoFrom" label-width="90px" style="width: 80%">
                <!--                <el-form-item label="景区ID:">-->
                <!--                  <el-input v-model="basicInfoFrom.scenicId" disabled class="el_input_class"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="景区名称:">
                  <el-input v-model="basicInfoFrom.scenicName" disabled class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item label="景区简称:">
                  <el-input v-model="basicInfoFrom.scenicShortName" disabled class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                  <el-input v-model="basicInfoFrom.address" disabled class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item label="负责人:">
                  <el-input v-model="basicInfoFrom.leader" class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                  <el-input v-model="basicInfoFrom.phone" class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:">
                  <el-input v-model="basicInfoFrom.email" class="el_input_class"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submitBasicInfoFrom">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="运营时间设置" name="operationTimeSetting">
              <el-form ref="operationTimeSettingFrom" :model="operationTimeSettingForm"
                       :rules="operationTimeSettingFromRules" label-width="200px"
                       style="width: 100%">
                <el-form-item label="工作日运营时间：" required>
                  <el-col :span="5">
                    <el-form-item prop="startTimeOfWorkday">
                      <el-time-picker type="date" placeholder="选择时间"
                                      v-model="operationTimeSettingForm.startTimeOfWorkday"
                                      format="HH:mm:ss"
                                      value-format="HH:mm:ss"
                                      style="width: 100%;">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="1">—</el-col>
                  <el-col :span="5">
                    <el-form-item prop="endTimeOfWorkday">
                      <el-time-picker type="date" placeholder="选择时间"
                                      v-model="operationTimeSettingForm.endTimeOfWorkday"
                                      format="HH:mm:ss"
                                      value-format="HH:mm:ss"
                                      style="width: 100%;">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="节假日(含周末)运营时间：" required>
                  <el-col :span="5">
                    <el-form-item prop="startTimeOfWeekday">
                      <el-time-picker type="date" placeholder="选择时间"
                                      v-model="operationTimeSettingForm.startTimeOfWeekday"
                                      format="HH:mm:ss"
                                      value-format="HH:mm:ss"
                                      style="width: 100%;">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="1">—</el-col>
                  <el-col :span="5">
                    <el-form-item prop="endTimeOfWeekday">
                      <el-time-picker type="date" placeholder="选择时间"
                                      v-model="operationTimeSettingForm.endTimeOfWeekday"
                                      format="HH:mm:ss"
                                      value-format="HH:mm:ss"
                                      style="width: 100%;">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <span slot="label">
                  运营状态切换模式
                   <el-tooltip placement="top">
                     <div slot="content">
                        自动模式：系统会根据已设置的运营时间每天自动启动和关闭景区的运营状态，无需手动操作。<br/>
                        手动模式：需要景区管理人员每天手动开启与停止景区的运营状态，系统不会自动切换。
                     </div>
                     <i class="el-icon-question"></i>
                   </el-tooltip>
                    ：
                  </span>
                  <el-radio v-model="operationTimeSettingForm.operationStatusSwitchType" label="0">自动</el-radio>
                  <el-radio v-model="operationTimeSettingForm.operationStatusSwitchType" label="1">手动</el-radio>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submitOperationTimeSettingFrom">
                    保存
                  </el-button>
                  <!--                  <el-button :type="isFormModified?'primary':'info'" size="mini" :disabled="!isFormModified"-->
                  <!--                             @click="submitOperationTimeSettingFrom">-->
                  <!--                    保存-->
                  <!--                  </el-button>-->
                  <!--                  <el-button :type="isFormModified?'success':'info'" size="mini" :disabled="!isFormModified"-->
                  <!--                             @click="resetOperationTimeSettingFrom" class="resetButton">-->
                  <!--                    重置-->
                  <!--                  </el-button>-->
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import store from "@/store";
import {
  changeScenicOperationStatus,
  getScenic,
  updateOperationTimeAndSwitchMode,
  updateScenic
} from "@/api/system/scenic";

export default {
  name: "BasicSetting",
  data() {
    return {
      name: "张三",
      form: {
        scenicName: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      basicInfoFrom: {},
      operationTimeSettingForm: {},//景区运营时间及运营状态切换模式相关配置
      originOperationTimeSettingForm: {},//景区运营时间及运营状态切换模式相关配置的原始值，用于对比operationTimeSettingForm对象的属性是否被修改
      isFormModified: false,
      operationTimeSettingMode: '1',
      activeTab: "scenicInfo", //景区基本信息,
      scenic: {
        operationStatus: "0", //景区运营状态。"0"：运营中；"1"：已停止运营
      },
      scenicBasicInfo: {
        operationStatus: "0", //景区运营状态。"0"：运营中；"1"：已停止运营
      }, //景区基本信息
      operationStatusContent: "",
      operationTimeSettingFromRules: {
        startTimeOfWorkday: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        endTimeOfWorkday: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        startTimeOfWeekday: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        endTimeOfWeekday: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ]
      }
    }
  },
  computed: {
    operationStatus() {
      return this.$store.getters.operationStatus;
    }
  },
  watch: {
    operationTimeSettingForm: {
      deep: true,
      // immediate: true,
      handler(newValue, oldValue) {
        let newStr = JSON.stringify(newValue);
        let originStr = JSON.stringify(this.originOperationTimeSettingForm);
        // console.log("newStr: ", newStr)
        // console.log("originStr: ", originStr)
        if (newStr === originStr) {
          console.log("operationTimeSettingForm复原了.")
          this.isFormModified = false;
        } else {
          console.log("operationTimeSettingForm被修改了.")
          this.isFormModified = true;
        }
      }
    },
    operationStatus: {
      // immediate: true, //立即执行
      deep: true, // 深度监听
      handler(nval, oval) {
        this.scenic.operationStatus = nval;
        this.scenicBasicInfo.operationStatus = nval;
      }
    },
    "scenic.operationStatus": {
      // immediate: true,
      handler(nval, oval) {
        if (nval === "0") {
          this.$modal.msgSuccess("景区已开启运营！");
        } else {
          this.$modal.msgSuccess("景区已停止运营！");
        }
      }
    },
    "scenicBasicInfo.operationStatus": {
      // immediate: true,
      handler(nval, oval) {
        this.updateOperationStatusUi(nval);
      }
    }
  },
  created() {

  },
  mounted() {
    let scenicId = store.getters.scenicId;
    scenicId && this.getScenicInfo(scenicId);
  },
  methods: {
    getScenicInfo(scenicId) {
      getScenic(scenicId).then(res => {
        console.log("getScenicInfo res= ", res)
        let data = res.data;
        this.scenic = data;
        this.basicInfoFrom = data;

        this.scenicBasicInfo = {
          scenicId: data.scenicId,
          scenicName: data.scenicName,
          operationStatus: data.operationStatus
        }

        this.updateOperationStatusUi(data.operationStatus);

        this.operationTimeSettingForm = {
          scenicId: data.scenicId,
          scenicShortName: data.scenicShortName,
          operationStatusSwitchType: data.operationStatusSwitchType,
          startTimeOfWorkday: data.startTimeOfWorkday,
          // startTimeOfWorkday: "09:30:00",
          endTimeOfWorkday: data.endTimeOfWorkday,
          startTimeOfWeekday: data.startTimeOfWeekday,
          endTimeOfWeekday: data.endTimeOfWeekday
        }

        this.originOperationTimeSettingForm = _.cloneDeep(this.operationTimeSettingForm);
        console.log("this.originOperationTimeSettingForm: ", this.originOperationTimeSettingForm)
      }).catch(error => {
        console.log("getScenicInfo error: ", error)
      })
    },
    submitOperationTimeSettingFrom() {
      updateOperationTimeAndSwitchMode(this.operationTimeSettingForm).then(res => {
        this.$modal.msgSuccess("保存成功！")

        this.getScenicInfo(this.scenic.scenicId)
      }).catch(err => {
        this.$modal.msgError("保存失败！")
      })
    },
    resetOperationTimeSettingFrom() {
      this.operationTimeSettingForm = _.cloneDeep(this.originOperationTimeSettingForm);
    },
    submitBasicInfoFrom() {
      if (this.scenic.scenicId) {
        updateScenic(this.scenic).then(res => {
          this.$modal.msgSuccess("保存成功");
        }).catch(err => {
          this.$modal.msgSuccess("保存失败");
        });
      }
    },
    // 景区运营状态修改
    handleOperationStatusChange(scenicId, operationStatus) {
      let text1 = operationStatus === "0" ? "开启" : "停止";
      let text2 = operationStatus === "0" ? "开启运营后游客将可以在泡泡豚小程序中搜索到当前景区，浏览景区提供的各项游船服务并下单。" : "停止运营后游客将无法在泡泡豚小程序中搜索到当前景区，无法浏览景区提供的各项游船服务并下单。";
      this.$modal.confirm('确认要' + text1 + '景区运营吗？' + text2).then(() => {
        return changeScenicOperationStatus(scenicId, operationStatus);
      }).then(() => {
        // this.$modal.msgSuccess(text1 + "成功");
        this.getScenicInfo(scenicId)
      }).catch(() => {
        this.scenicBasicInfo.operationStatus = this.scenicBasicInfo.operationStatus === "0" ? "1" : "0";
      });
    },
    updateOperationStatusUi(operationStatus) {
      if (operationStatus === "0") {
        this.$refs.operationStatusText.innerText = "运营中";
        this.$refs.operationStatusText.style.color = "blue";
        this.operationStatusContent = "点击停止景区运营";
      } else {
        this.$refs.operationStatusText.innerText = "已停止运营";
        this.$refs.operationStatusText.style.color = "red";
        this.operationStatusContent = "点击开启景区运营";
      }
    }
  }
}
</script>

<style scoped>
.setting_container {
  margin: 15px 0 0 15px;
}

.head {
  font-weight: 500;
}

.title {
  font-weight: 500;
}

.el_input_class {
  width: 600px;
}

.resetButton {
  margin-left: 50px;
}

</style>
